<template>
  <div :style="headerStyle()">
    <img class="system" :src="'./static/images/shop/decorate/header-' + systemType + '.png'" />
    <div class="WechatMiniProgram-wrap sa-flex sa-row-right">
      <navbar
        :compData="headerData.style"
        :platformType="platformType"
        :isScroll="isScroll"
        :templateDetailType="templateDetailType"
      />
      <img
        v-if="platformType == 'WechatMiniProgram'"
        class="WechatMiniProgram"
        :src="'./static/images/shop/decorate/header-' + platformType + '.png'"
      />
    </div>
  </div>
</template>

<script setup>
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
  import navbar from './navbar.vue';

  const props = defineProps([
    'headerData',
    'systemType',
    'platformType',
    'isScroll',
    'templateDetailType',
  ]);

  function headerStyle() {
    let mode = {};
    if (props.headerData && props.headerData.style) {
      if (props.headerData.style.navbar.mode == 'inner') {
        mode = {
          position: 'absolute',
          top: 0,
          right: 0,
          'z-index': 10,
        };
        // if (props.isScroll) {
          mode = {
            ...mode,
            background:
              props.headerData.style.navbar.type == 'color'
                ? props.headerData.style.navbar.color
                : props.headerData.style.navbar.src
                ? 'url(' + checkUrl(props.headerData.style.navbar.src) + ')'
                : props.headerData.style.navbar.src,
          };
        // }
      }
      if (props.headerData.style.navbar.mode == 'normal') {
        mode = {
          background:
            props.headerData.style.navbar.type == 'color'
              ? props.headerData.style.navbar.color
              : props.headerData.style.navbar.src
              ? 'url(' + checkUrl(props.headerData.style.navbar.src) + ')'
              : props.headerData.style.navbar.src,
        };
      }
    }
    return mode;
  }
</script>

<style lang="scss" scoped>
  .WechatMiniProgram-wrap {
    height: 50px;
    padding: 0 6px 0 0;
    .WechatMiniProgram {
      height: 30px;
    }
  }
</style>
